<template>
  <div class="test">
    <img alt="Vue logo" src="../assets/logo.png">
    <div>test</div>
    <el-button type="primary" @click="handleTest" :loading="loading">测试获取用户列表</el-button>
    
    <!-- 添加表格 -->
    <el-table :data="userList" v-loading="loading" style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="email" label="邮箱" width="180" />
      <el-table-column prop="phonenumber" label="电话" width="120" />
      <el-table-column prop="status" label="状态" width="80" />
      <el-table-column prop="create_time" label="创建时间" />
      <el-table-column prop="remark" label="备注" />
    </el-table>
  </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { ElMessage } from 'element-plus'
    import requestUtil from '@/util/request'

    // 定义用户列表数据
    const userList = ref([])
    // 定义加载状态
    const loading = ref(false)

    const handleTest = async () => {
        loading.value = true
        try {
            const result = await requestUtil.get("user/users")
            // 如果请求成功（状态码 2xx），直接处理返回数据
            userList.value = result.data
            console.log(JSON.stringify(userList.value))
            ElMessage.success(result.msg)
        } catch (error) {
            // 401 状态码，跳转到登录页
            if (error.status === 401) {
                router.push('/login')
            }
            // 其他错误已经在响应拦截器中处理了
        } finally {
            loading.value = false
        }
    }
</script>

<style scoped>
.test {
    padding: 20px;
}
</style>
